import React from "react";

//! 引入classNames，用于不同的条件添加不同的样式
import classNames from "classnames/bind";
import styles from "./03-style.css";
let cx = classNames.bind(styles);

const Child = (props) => {
  let className = cx({
    // key表示类名，value表示变量或者表达式
    green: props.num === "1",
    red: props.num === "2",
    big: true,
  });
  return (
    // <div className={props.num === "1" ? "green" : "red"}>
    <div className={className}>hello react!! - {props.num}</div>
  );
};

const App = () => {
  return (
    <div>
      <h2>不同的条件添加不同的样式</h2>
      <Child num="2" />
    </div>
  );
};

export default App;
